{% extends 'layout.html' %}

{% block content %}
<div class="sideMenu">
    <a href="{{ url_for('album.edit') }}">
        <span>{{ _('album.add') }}</span>
        <span class="icon-plus"></span>
    </a>
    <a data-bind="attr: { href: '{{ url_for('album.report') }}?year=' + year() }" target="_blank">
        <span>{{ _('album.pdf report') }}</span>
        <span class="icon-download"></span>
    </a>
</div>

<div class="mainContent">
    <div class="listContainer">
        <table>
            <thead>
                <tr>
                    <th>{{ _('album.name') }}</th>
                    <th>{{ _('album.artist') }}</th>
                    <th style="width: 60px;">{{ _('album.year') }}</th>
                    <th style="width: 60px;">{{ _('album.best_of_compilation') }}</th>
                </tr>
            </thead>
            <tbody>
                <!-- ko foreach: albums -->
                    <tr>
                        <td>
                            <a data-bind="text: name, attr: { href: '{{ url_for('album.edit') }}/' + id }"></a>
                        </td>
                        <td>
                            <div data-bind="text: artist"></div>
                        </td>
                        <td>
                            <div data-bind="text: year"></div>
                        </td>
                        <td>
                            <div data-bind="visible: best_of_compilation" class="icon-check"></div>
                        </td>
                    </tr>
                <!-- /ko -->
            </tbody>
        </table>
    </div>
    <div class="filterContainer">
        <input data-bind="textInput: year" id="album_year" placeholder="{{ _('album.filter by year') }}"
               type="number" maxlength="4">
    </div>
</div>

<script type="text/javascript">

function AlbumsViewModel() {
    var self = this;
    self.albums = ko.observableArray({{ albums|safe }});
    self.year = ko.observable('');
    self.year.subscribe(function(newVal) {
        self.filterChanged();
    });
    self.request = null;

    self.filterChanged = function() {
        if (self.request !== null) {
            self.request.abort();
        }
        self.request = $.ajax("{{ url_for('album.data') }}?year=" + self.year(), {
            contentType: "application/json",
            dataType: "json",
            success: function(albums) {
                self.albums(albums);
                self.request = null;
            },
            error: function(jqXHR, textStatus, errorThrown) {
                if (textStatus !== 'abort') {
                    alert('{{ _('common.retrieving data failed') }}');
                }
                self.request = null;
            }
        });
    };
}

var albumsViewModel = new AlbumsViewModel();

$(document).ready(function() {
    ko.applyBindings(albumsViewModel);
});

</script>
{% endblock %}
